<!-- 我的喵豆页面 -->
<!--XXX 已弃用，考虑删除 -->
<template>
  <div class="container">
    <uni-nav-bar
      class="nav-bar"
      fixed="true"
      title="我的喵豆"
      status-bar="true"
      :border="false"
      left-icon="left"
      @click-left="back"
    />
    <div class="body">
      <!-- 喵豆数量 -->
      <div class="miaodou-num">
        <!-- 当前喵豆数量 -->
        <div class="num">
          <image
            class="num-img"
            src="@/static/icons/my-miaodou/miaodou.png"
          />
          <text class="num-text">
            {{ miaodouStatus.availableMiaodou }}
          </text>
        </div>
        <!-- 我的喵豆 -->
        <div class="text">
          我的喵豆
        </div>
        <!-- 今天获得的喵豆 -->
        <div class="today">
          <text> 今日获得喵豆：</text><text class="today-week-num">
            {{ miaodouStatus.todayMiaodou }}
          </text>
        </div>
        <!-- 本周获得的喵豆 -->
        <div class="week">
          <text> 本周获得喵豆：</text> <text class="today-week-num">
            {{ miaodouStatus.weekMiaodou }}
          </text>
        </div>
        <!-- 侧边按钮 -->
        <div
          class="side-btn"
          @click="sideBtnClick"
        >
          <image
            class="side-btn-icon"
            src="@/static/icons/my-miaodou/to-lottery.png"
          />
          去兑换
        </div>
      </div>
      <!-- 详情 -->
      <div class="detail">
        <!-- 标签 -->
        <ul class="tabs">
          <li
            class="tab"
            :class="currentRecordListType === 0 ? 'active' : ''"
            @click="switchTab(0)"
          >
            <text class="tab-text">
              喵豆明细
            </text>
          </li>
          <li
            class="tab"
            :class="currentRecordListType === 1 ? 'active' : ''"
            @click="switchTab(1)"
          >
            <text class="tab-text">
              兑换记录
            </text>
          </li>
        </ul>
        <!-- 记录列表 -->
        <ul class="record-list">
          <li
            v-for="item in recordList"
            :key="item.time"
            class="record-item"
          >
            <!-- 内容 -->
            <div class="content">
              {{ item.content }}
            </div>
            <!-- 时间 -->
            <div class="time">
              {{ item.time }}
            </div>
            <!-- 课程的查看按钮 -->
            <button
              v-if="item?.courseId"
              class="view-btn"
              @click="recordRightTextClick(item?.courseId)"
            >
              查看
            </button>
            <!-- 描述 -->
            <div
              v-else
              class="desc"
            >
              {{ item.desc }}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useActivity618 } from '@/stores/activity-618-store';
import { useUser } from '@/stores/user';
import { navigateTo } from '@/utils/navigate';

const user = useUser();
const { miaodouStatus, miaodouList } = storeToRefs(user);
const { getMiaodouList, getTodayAndWeekMiaodou } = user;

const activity618Store = useActivity618();
const { redeemRecord } = storeToRefs(activity618Store);
const { getRedeemRecord } = activity618Store;

// 页面加载时获取今日和本周喵豆、喵豆列表、抽奖明细列表
onMounted(() => {
  getTodayAndWeekMiaodou();
  getMiaodouList();
});

// #region 兑换记录相关

onMounted(async () => {
  getRedeemRecord();
});

/** 当前记录列表 */
const recordList = computed(() => (currentRecordListType.value === 0
  ? miaodouList.value
  : redeemRecord.value));

// 当前记录列表类型
const currentRecordListType = ref(0);

/**
 * 记录右侧文字点击事件
 * @param courseId 课程id
 */
const recordRightTextClick = (courseId: string) => {
  if (!courseId) return;
  navigateTo('CourseDetail', { courseId });
};

// #endregion

// 切换标签
const switchTab = (tabIndex: number) => {
  currentRecordListType.value = tabIndex;
};

// 打开时检查是否有参数，如果有则切换到抽奖记录
onLoad((options) => {
  console.log('options', options?.type);
  if (options?.type === 'redeemRecord') {
    switchTab(1);
  }
});

// 返回上一页
const back = () => {
  uni.navigateBack();
};

/** 侧边按钮点击事件 */
const sideBtnClick = () => {
  navigateTo('redeem-gifts');
};
</script>

<style lang="scss" scoped>
// XXX 暂时无法设定标题栏的字体大小，/deep/和:deep()都不行

.container {
  width: 100vw;
  height: 100vh;

  display: grid;
  grid-template:
    "nav" auto "body" 1fr / 1fr;

  .body {
    padding: 16px;
    display: grid;
    grid-template:
      "miaodou-num" 132px
      "gap" 30px
      "detail" 1fr;

    // 喵豆数量
    .miaodou-num {
      grid-area: miaodou-num;

      position: relative;

      display: grid;
      grid-template:
        "num num" 65px "text text" 25px "today week" 40px / 200px 1fr;
      column-gap: 10px;
      justify-items: center;

      // 当前喵豆数量
      .num {
        grid-area: num;
        align-self: end;

        display: flex;
        align-items: center;

        font-size: 28px;
        font-weight: bold;
        color: #333;

        .num-img {
          width: 31px;
          height: 31px;
        }
      }

      // 「我的喵豆」文字
      .text {
        grid-area: text;
        align-self: start;

        font-size: 15px;
        font-weight: bold;
        color: rgb(0 0 0 / 40%);
      }

      // 今天获得的喵豆、本周获得的喵豆
      .today,
      .week {
        align-self: end;

        display: flex;

        font-size: 13px;
        font-weight: 400;
        color: #333;

        .today-week-num {
          font-size: 13px;
          font-weight: 400;
          color: #ff2459;
        }
      }

      // 今天获得的喵豆
      .today {
        grid-area: today;
      }

      // 本周获得的喵豆
      .week {
        grid-area: week;
      }

      // 去抽奖
      .side-btn {
        position: absolute;
        top: 22px;
        right: 0;

        width: 67px;
        height: 24px;

        background: rgb(255 36 91 / 30%);
        border-radius: 15px 0 0 15px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 13px;
        line-height: 24px;
        color: #ff2459;
        text-align: center;

        .side-btn-icon {
          margin-right: 4px;

          width: 16px;
          height: 16px;
        }
      }
    }

    // 详情
    .detail {
      grid-area: detail;

      display: grid;
      grid-template-areas:
        "tabs"
        "record-list";
      grid-template-rows: 40px 1fr;
      row-gap: 20px;

      // 标签
      .tabs {
        grid-area: tabs;

        display: grid;
        grid-template-columns: 68px 68px 1fr;
        column-gap: 16px;
        align-items: center;
        justify-content: center;

        .tab {
          grid-column: span 1;

          font-size: 15px;
          color: rgb(0 0 0 / 40%);

          &.active {
            font-size: 17px;
            color: #333;

            // 下划线
            .tab-text {
              display: flex;
              flex-direction: column;
              align-items: center;

              &::after {
                margin-top: 4px;

                width: 70%;
                height: 3px;

                content: "";

                background: #ff2459;

                display: block;
              }
            }
          }
        }
      }

      // 记录列表
      .record-list {
        grid-area: record-list;

        display: flex;
        flex-direction: column;
        row-gap: 25px;

        .record-item {
          width: 100%;
          height: 45px;

          display: grid;
          grid-template:
            "content desc" 1fr
            "time desc" 1fr
            /1fr auto;
          row-gap: 5px;

          // justify-content: cen
          align-items: center;

          // 内容
          .content {
            grid-area: content;

            font-size: 15px;
            color: #333;
          }

          // 时间
          .time {
            grid-area: time;

            font-size: 13px;
            color: rgb(0 0 0 / 40%);
          }

          // 查看按钮
          .view-btn {
            grid-area: desc;
            align-self: start;

            width: 20.5128vw;
            height: 8.4615vw;

            background: linear-gradient(90deg, #FF3C43 0%, #FF9502 100%);
            border-radius: 36px;

            font-size: 15px;
            line-height: 33px;
            color: #fff;
            text-align: center;
          }

          // 描述
          .desc {
            grid-area: desc;

            font-size: 13px;
            color: #27AE60;
          }

          .miaodou-add {
            font-size: 20px;
            color: #27ae60;
          }

          .miaodou-reduce {
            font-size: 20px;
            color: #333;
          }

          .lottery-received {
            font-size: 15px;
            color: #27ae60;
          }

          .lottery-unreceived {
            font-size: 15px;
            color: #333;
          }
        }
      }
    }
  }
}
</style>
